<template>
  <div>
    <div class="breadcrumb">
      <router-link class="shouye" to="/home">首页 / </router-link>
      <router-link class="xinxi" to="/gonggao">信息公告 / </router-link>
      <div class="xiangqing">信息公告详情页</div>
    </div>
    <div class="table-container">
      <h2>{{ gonggao.name }}</h2>
      <div class="info-container">
        <div class="info-header">
          <div class="info-left">
            <span>发布企业：太原市迎泽区卫生局卫生监督所</span>
          </div>
          <div class="info-right">
            <span>发布时间：{{ gonggao.date }}</span>
          </div>
        </div>
        <div>
          <img src="../images/公告列表详情页/u247.png" style="width: 1100px;height: 575px;">
        </div>
        <div class="fujian">
          <div class="tu1">
            <img src="../images/公告列表详情页/u251.png" style="width: 1em;height: 1em;">
            附件：
          </div> 
          <div class="tu2">
            <img src="../images/公告列表详情页/u252.png" style="width: 1em;height: 1em;">
            太原市迎泽区卫生局卫生监督所2023年4月至12月政府采购意向-公用经费项目附件
          </div> 
        </div>
        
        <!-- <p>为了使供应商及时了解政府采购信息，根据《政府采购政策》等有关规定，现将{{ gonggao.name }}公示如下：</p>
        <table class="info-table">
          <thead>
            <tr>
              <th>序号</th>
              <th>采购项目名称</th>
              <th>采购需求概况</th>
              <th>预算金额（元）</th>
              <th>预计采购时间（填写具体月）</th>
              <th>是否专门面向中小企业</th>
              <th>备注</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>1</td>
              <td>{{ gonggao.projectName }}</td>
              <td>{{ gonggao.requirements }}</td>
              <td>{{ gonggao.budget }}</td>
              <td>{{ gonggao.expectedTime }}</td>
              <td>{{ gonggao.forSMEs ? '是' : '否' }}</td>
              <td>{{ gonggao.remarks }}</td>
            </tr>
          </tbody>
        </table>
        <p>本次公告的采购意向是本单位政府采购工作的初步安排，具体采购项目情况以相关采购公告和采购文件为准。</p>
        <div class="contact-info">
          <p>联系人：{{ gonggao.contact.name }}</p>
          <p>电话：{{ gonggao.contact.phone }}</p>
          <p>邮箱：{{ gonggao.contact.email }}</p>
        </div> -->
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Xiangqing',
  data() {
    return {
      gonggao: {
        }
      }
    }
  }

</script>

<style scoped>
.table-container {
  margin: 20px;
  padding: 20px;
  border: 1px solid #dddddd;
  background-color: white;
  border-radius: 5px;
  margin-bottom: 50px
}

.breadcrumb {
  margin-bottom: 10px;
  margin-left: 10px;
  font-size: 14px;
  color: #888;
  text-align: left;
  margin-top: 30px;
  display: flex;
}

.breadcrumb .xinxi {
  color: #888;
  text-decoration: none;
  margin-top: 30px;
}

.breadcrumb .xiangqing {
  color: black;
  margin-top: 30px;
}

.breadcrumb .shouye {
  color: #888;
  text-decoration: none;
  margin-top: 30px;
}

h2 {
  margin-bottom: 20px;
  font-size: 24px;
  font-weight: bold;
  text-align: center;
}

.info-container {
  margin: 20px;
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 5px;
}

.info-header {
  display: flex;
  justify-content: center;
  align-items: center; 
}

.info-left {
  margin-right: 100px;
}

.info-right {
  margin-left: 100px; /* 将右侧的内容推到最右边 */
}

.info-header span {
  margin-right: 10px; /* 可以根据需要调整间距 */
}
.fujian{
  display: flex;
  justify-content: center;
  align-items: center; 
  margin-right:400px;
  margin-top:30px;
}
.info-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 10px;
}

.info-table th,
.info-table td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: center;
}

.info-table th {
  background-color: #f2f2f2;
}

.contact-info {
  margin-top: 10px;
}

.contact-info p {
  margin: 5px 0;
}
</style>
